<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    输入数字<input type="text" class="box" />
    <span class="info">提示信息</span>
    <script>
      //   用正则验证一个数是否在0-666之间
      //   var reg=/^[0-9]$/ //一位0-9
      //   var reg=/^[1-9][0-9]$/  //两位10-99
      //   var reg=/^1[0-9][0-9]$/   //三位100-199
      //   var reg=/^2[0-9][0-9]$/  //三位200-299
      //   var reg=/^3[0-9][0-9]$/  //三位300-399
      //   var reg=/^4[0-9][0-9]$/  //三位400-499
      //   var reg=/^5[0-9][0-9]$/  //三位500-599
      //   var reg=/^6[0-6][0-6]$/  //三位600-666
      var boxEle = document.querySelector(".box");
      var infoEle = document.querySelector(".info");
      boxEle.onblur = function () {
        var box = boxEle.value;
        var reg =
          /^[0-9]$|^[1-9][0-9]$|^1[0-9][0-9]$|^2[0-9][0-9]$|^3[0-9][0-9]$|^4[0-9][0-9]$|^5[0-9][0-9]$|^6[0-6][0-6]$/;
        if (reg.test(box)) {
          infoEle.innerHTML = "数字符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "数字不符合规则";
          infoEle.style.color = "red";
        }
      };
    </script>
  </body>
</html>
